<template>
  <div class="fence-container">
    <div style="padding: 8px">
      <el-button @click="handleEdit">编辑</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>
    <div ref="map" style="width: 1200px;height: 450px;position: relative"></div>
  </div>
</template>

<script>
import {DrawScene, PolygonEdit} from "bmap-draw";
import {convertLL2MC, convertMC2LL} from "@/utils/gps";

export default {
  name: "FenceEdit",
  data() {
    return {}
  },
  mounted() {
    //测试百度墨卡托转百度经纬度
    // let lngLat = convertMC2LL({
    //   x: 12953237.92711407,
    //   y: 4827882.733021367
    // })
    // console.log("mounted lngLat: ", lngLat);
    //
    // let mercator = convertLL2MC({
    //   x: 116.35965,
    //   y: 39.92855
    // })
    // console.log("mounted mercator: ", mercator);

    const map = new BMapGL.Map(this.$refs.map);
    map.centerAndZoom(new BMapGL.Point(116.36292, 39.92026), 14);
    // map.setMapStyleV2({styleJson: customStyleJSON});
    map.enableScrollWheelZoom();

    const overlay = new BMapGL.Polygon([
      new BMapGL.Point(116.35965, 39.92855),
      new BMapGL.Point(116.35391, 39.93740),
      new BMapGL.Point(116.34873, 39.92855),
      new BMapGL.Point(116.34696, 39.91527),
      new BMapGL.Point(116.36335, 39.90930),
      new BMapGL.Point(116.38121, 39.91461),
      new BMapGL.Point(116.37920, 39.92855),
      new BMapGL.Point(116.37518, 39.93674),
      new BMapGL.Point(116.36885, 39.92877)
    ], {
      strokeColor: '#8055e3',
      strokeWeight: 5,
      strokeOpacity: 1
    });
    map.addOverlay(overlay);

    const scene = new DrawScene(map);
    const sline = new PolygonEdit(scene);

    this.overlay = overlay;
    this.sline = sline;

    // 绑定操作事件
    sline.addEventListener('operate-change', (e) => {
      console.log('operate-change', e.target);
    });
    sline.addEventListener('operate-ok', (e) => {
      console.log('operate-ok', e.target);
      let points = e.target.overlay.points;
      if (points) {
        for (let i = 0; i < points.length; i++) {
          let point = points[i];
          let lngLat = convertMC2LL({
            x: point.lng,
            y: point.lat
          })
          console.log("lngLat: ", lngLat)
        }
      }
    });
    sline.addEventListener('operate-cancel', (e) => {
      console.log('operate-cancel', e.target);
    });


  },
  methods: {
    handleEdit() {
      this.sline.open(this.overlay);
    },
    handleClose() {
      this.sline.close();
    },
    /**
     * 将百度墨卡托坐标转为百度经纬度坐标。
     * @param param
     * @return {(*|number)[]}
     */
    // getLngLatFromPoint(param) {
    //   var lng = param.lng;
    //   var lat = param.lat;
    //   var newlnglat = new BMap.Pixel(lng, lat);
    //   var LngLat = this.projection.pointToLngLat(newlnglat);
    //   console.log("LngLat: ", LngLat)
    //   return [LngLat.lng, LngLat.lat]  //百度经纬度坐标
    // }
  }
  // methods: {
  //   initMap0() {
  //     let wharfList = this.scenic.wharfList;
  //
  //     if (wharfList && wharfList.length > 0) {
  //       let originWharfPointArr = [];
  //       let translatedWharfPointArr = [];
  //
  //       wharfList.forEach(wharf => {
  //         let translatedPoint = wgs84tobd09(wharf.lon, wharf.lat);
  //         translatedWharfPointArr.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]));
  //       })
  //       this.initMap1(translatedWharfPointArr);
  //     }
  //   },
  //
  //   initMap1(translatedWharfPointArr) {
  //     let fenceList = this.scenic.fenceList;
  //     let allFenceTranslatedPointArr = []; //所有电子围栏已被转换为百度坐标系的坐标点数组
  //     if (fenceList && fenceList.length > 0) {
  //       for (let i = 0; i < fenceList.length; i++) {
  //         let fence = fenceList[i];
  //         let coordinates = fence.coordinates; //示例："114 352979,30.500601 114,352332 30502281 114 354668,30.504086 114,358441 30501908 114 355243 30.500383"
  //         let dotArr = coordinates.split(",");
  //         let fenceItem = {};
  //         Object.assign(fenceItem, fence);
  //
  //         if (i % 2 === 0) {
  //           fenceItem.fenceName = "电子围栏" + (i / 2 + 1);
  //         }
  //
  //         fenceItem.coordinates = []; //用于存储电子围栏的真实坐标的数组
  //         fenceItem.bdCoordinates = []; //用于存储电子围栏的百度坐标的数组
  //         let currFenceTranslatedPointArr = [];
  //         //遍历坐标点
  //         for (let j = 0; j < dotArr.length / 2; j++) {
  //           let lng = Number(dotArr[2 * j]); //经度
  //           let lat = Number(dotArr[2 * j + 1]); //纬度
  //           fenceItem.coordinates.push(lng);
  //           fenceItem.coordinates.push(lat);
  //           let translatedPoint = wgs84tobd09(lng, lat);
  //           fenceItem.bdCoordinates.push(translatedPoint[0]);
  //           fenceItem.bdCoordinates.push(translatedPoint[1]);
  //           currFenceTranslatedPointArr.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]));
  //           allFenceTranslatedPointArr.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]));
  //         }
  //         let fencePolygon = new BMapGL.Polygon(currFenceTranslatedPointArr, {
  //           strokeStyle: 'solid', //覆盖物的样式，solid或dashed
  //           strokeColor: 'yellow',
  //           fillColor: '#005a65', //多边形内部的填充色
  //           strokeWeight: 3,
  //           strokeOpacity: 0.5
  //         });
  //         fenceItem.overlay = fencePolygon;
  //         this.fenceArr.push(fenceItem);
  //       }
  //     }
  //
  //     this.allFenceTranslatedPointArr = allFenceTranslatedPointArr;
  //
  //     let centerPointArr = translatedWharfPointArr.concat(allFenceTranslatedPointArr); //地图中心点坐标集合。map根据这些点计算出合适的中心点和地图缩放级别。
  //
  //     if (!centerPointArr || centerPointArr.length === 0) {
  //       centerPointArr = [];
  //       centerPointArr.push(new BMapGL.Point(116.404269, 39.917813)); //默认坐标点为北京天安门
  //     }
  //
  //     //创建百度地图对象
  //     this.map = new BMapGL.Map(this.$refs.map, {
  //       //设置地图类型。BMAP_NORMAL_MAP：标准地图，BMAP_SATELLITE_MAP：普通卫星图模式，BMAP_EARTH_MAP：地球模式。
  //       //请注意，地球模式（BMAP_EARTH_MAP）下能支持的地图交互操作有限 ，如您需要卫星地图支持和标准地图（BMAP_NORMAL_MAP）一致的交互体验，请使用普通卫星图模式（BMAP_SATELLITE_MAP）。
  //       mapType: BMAP_SATELLITE_MAP,
  //       minZoom: 16,
  //       maxZoom: 21
  //     });
  //
  //     var viewport = this.map.getViewport(centerPointArr, {
  //       zoomFactor: 0
  //     });
  //
  //     this.map.centerAndZoom(viewport.center, viewport.zoom);
  //     this.map.enableScrollWheelZoom(true);
  //
  //     this.map.addEventListener("mousemove", e => {
  //       // console.log("mousemove: e= ", e)
  //     });
  //
  //     var that = this;
  //     //加载本地的地图自定义样式文件
  //     fetch("../../map/custom_map_config.json")
  //       .then(res => {
  //         // console.log("fetch res: ", res)
  //         if (res.status === 200) {
  //           //json()是返回的Response对象提供的一个异步方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了。
  //           // 注意：json()方法只能调用一次，后面再次调用将无法获取到数据。
  //           var promiseJson = res.json();
  //           console.log("res promiseJson= ", promiseJson)
  //           return promiseJson
  //         } else {
  //           return {}
  //         }
  //       })
  //       .then(text => {
  //         // console.log("setMapStyleV2 text: ", text)
  //         that.map.setMapStyleV2({
  //           styleJson: text
  //         })
  //
  //       });
  //
  //     //添加码头点覆盖物
  //     translatedWharfPointArr.forEach(point => {
  //       let icon = new BMapGL.Icon("/img/wharf_icon.png", new BMapGL.Size(24, 24), {anchor: new BMapGL.Size(8, -10)});
  //       let marker = new BMapGL.Marker(point, {
  //         icon: icon
  //       });        // 创建标注
  //       this.map.addOverlay(marker);
  //     })
  //
  //     //创建电子围栏覆盖物
  //     // if (allFenceTranslatedPointArr.length > 0) {
  //     //   //创建电子围栏多边形覆盖物
  //     //   var fencePolygon = new BMapGL.Polygon(allFenceTranslatedPointArr, {
  //     //     strokeStyle: 'solid',
  //     //     strokeColor: 'yellow',
  //     //     // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
  //     //     fillColor: '#005a65', //多边形内部的填充色
  //     //     strokeWeight: 3,
  //     //     strokeOpacity: 0.5
  //     //   });
  //     //
  //     //   //添加电子围栏多边形覆盖物
  //     //   this.map.addOverlay(fencePolygon);
  //     // }
  //
  //     this.initDraw();
  //
  //   },
  //   initDraw() {
  //     //创建场景类对象，作为鼠标绘制的管理类，用于管理全局的事件监听、覆盖物存取、获取当前交互对象等。在使用其他绘制功能前，需要先实例一个 DrawScene 类。
  //     this.drawScene = new DrawScene(this.map, {
  //       isOpen: false, //默认是否开启绘制状态
  //       noLimit: true, //是否无限制绘制，默认为false, 限制绘制
  //       enableSnap: false, //是否开启可吸附，默认false
  //       snapDistance: 10, //吸附范围，默认10
  //       //点线面图形样式配置
  //       baseOpts: {
  //         strokeStyle: 'solid',
  //         strokeColor: 'yellow',
  //         // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
  //         fillColor: '#005a65', //多边形内部的填充色
  //         strokeWeight: 3,
  //         strokeOpacity: 0.5
  //       },
  //       //提示文字样式配置
  //       labelOptions: {
  //         borderRadius: '2px',
  //         background: '#b5d3fb',
  //         border: '1px solid #b5d3fb',
  //         color: '#333',
  //         fontSize: '12px',
  //         letterSpacing: '0',
  //         padding: '5px'
  //       },
  //       //吸附点样式配置
  //       // matchOverlay: {}
  //     });
  //
  //     //点击绘制完成的对勾时会回调该方法
  //     this.drawScene.addEventListener(OperateEventType.COMPLETE, e => {
  //       console.log("操作完成,e: ", e)
  //       // console.log("this.drawScene.instances: ", this.drawScene.instances);
  //       // console.log("this.drawScene.selectInstance: ", this.drawScene.selectInstance);
  //       if (e.target) {
  //         let overlay = e.target.overlay;
  //         if (overlay && overlay.points) { //overlay的points属性不为空说明其不是点覆盖物，此处需排除点覆盖物
  //           this.polyLayer.addOverlay(overlay);
  //
  //         }
  //       }
  //     })
  //
  //     //点击取消绘制的叉叉时会回调该方法
  //     this.drawScene.addEventListener(OperateEventType.CANCEL, e => {
  //       console.log("操作取消,e: ", e)
  //     })
  //
  //     // 初始化选择类对象。
  //     this.select = new Select(this.drawScene, {
  //       // type: DrawingType.DRAWING_POINT // 选择点覆盖物
  //       // type: DrawingType.DRAWING_MARKER //选择标记物
  //       type: DrawingType.DRAWING_POLYGON // 选择点覆盖物
  //     });
  //
  //     // 创建存储地图上的几何图形的容器（也可以使用数组存储）
  //     this.polyLayer = new BMapGL.GeoJSONLayer('poly', {
  //       polygonStyle: function (properties) {
  //         return {
  //           strokeStyle: 'solid',
  //           strokeColor: 'yellow',
  //           fillColor: '#005a65', //多边形内部的填充色
  //           strokeWeight: 3,
  //           strokeOpacity: 0.5
  //         }
  //       }
  //     });
  //     this.map.addGeoJSONLayer(this.polyLayer);
  //     this.drawScene.attachSnapSource(this.polyLayer.overlayData);
  //
  //     //添加默认的各种覆盖物。
  //     this.addDefaultOverlays();
  //
  //     //创建多边形绘制类对象，继承绘制类抽象基类DrawBase，提供绘制多边形能力。
  //     let polygonDrawOptions = {
  //       hideTip: false, // 是否隐藏绘制提示，默认为true
  //       isOpen: false, //默认是否开启绘制状态
  //       baseOpts: {
  //         strokeStyle: 'solid',
  //         strokeColor: 'yellow',
  //         fillColor: '#005a65', //多边形内部的填充色
  //         strokeWeight: 3,
  //         strokeOpacity: 0.5
  //       }
  //     }
  //     this.polygonDraw = new PolygonDraw(this.drawScene, polygonDrawOptions);
  //
  //     //创建多边形编辑类对象。
  //     // this.polygonEdit = new PolygonEdit(this.drawScene, this.polygonDraw, polygonDrawOptions);
  //     this.polygonEdit = new PolygonEdit(this.drawScene);
  //   },
  //   /**
  //    * 添加默认的各种覆盖物。
  //    */
  //   addDefaultOverlays() {
  //     if (this.fenceArr.length > 0) {
  //       for (let i = 0; i < this.fenceArr.length; i++) {
  //         let overlay = this.fenceArr[i].overlay;
  //         if (overlay) {
  //           this.polyLayer.addOverlay(overlay);
  //         }
  //       }
  //     }
  //   },
  //   drawChange(val) {
  //     const drawType = this.editType
  //     this.lastDrawType = drawType // 保存上一次绘制
  //
  //     console.log("drawChange val: ", val, ", drawType: ", this.editType);
  //
  //     if (val) {
  //       if (drawType === "fence") { //绘制电子围栏(多边形)
  //         this.polygonDraw.open(() => {
  //           console.log("开启电子围栏绘制!")
  //
  //         })
  //       } else if (drawType === "restrictedZone") { //绘制禁航区(多边形)
  //         this.polygonDraw.open(() => {
  //           console.log("开启禁航区绘制!")
  //
  //         })
  //       }
  //     } else {
  //       if (drawType === "fence") { //绘制多边形
  //         this.polygonDraw.close(() => {
  //           console.log("结束电子围栏绘制!")
  //
  //         })
  //       } else if (drawType === "restrictedZone") { //绘制禁航区(多边形)
  //         this.polygonDraw.close(() => {
  //           console.log("结束禁航区绘制!")
  //
  //         })
  //       }
  //     }
  //
  //   },
  //   openSelect() {
  //     this.select.open();
  //     this.select.addEventListener(OperateEventType.CLICK, e => {
  //       let target = this.polyLayer.pickOverlays(e.target);
  //       console.log("openSelect target: ", target)
  //       if (target && target[0]) {
  //         this.selectedOverlay = target[0];
  //         this.setActiveStyle(this.selectedOverlay);
  //
  //         this.polygonEdit.open(this.selectedOverlay);
  //       } else {
  //         this.polygonEdit.close();
  //
  //         this.polyLayer.resetStyle();
  //       }
  //     });
  //   },
  //   closeSelect() {
  //     this.select.close();
  //     this.polyLayer.resetStyle();
  //     this.selectedOverlay = [];
  //   },
  //   setActiveStyle(overlay) {
  //     this.polyLayer.resetStyle();
  //     overlay.setOptions({
  //       strokeStyle: 'solid', //覆盖物的样式，solid或dashed
  //       strokeColor: 'yellow',
  //       // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
  //       fillColor: '#1ba0b0', //多边形内部的填充色
  //       strokeWeight: 3,
  //       strokeOpacity: 0.5
  //     });
  //   },
  //   showCoordinates(val) {
  //     if (val) { //选择框被选中
  //       this.coordinateLabelArr = [];
  //       this.fenceArr.forEach(fence => {
  //         for (let i = 0; i < fence.coordinateNum; i++) {
  //           let bdLng = fence.bdCoordinates[2 * i];
  //           let bdLat = fence.bdCoordinates[2 * i + 1];
  //           let lng = fence.coordinates[2 * i];
  //           let lat = fence.coordinates[2 * i + 1];
  //           let point = new BMapGL.Point(bdLng, bdLat);
  //           let content = `[${lng},${lat}]`;
  //           let label = new BMapGL.Label(content, {       // 创建文本标注
  //             position: point,                          // 设置标注的地理位置
  //             offset: new BMapGL.Size(-50, 5)           // 设置标注的偏移量
  //           })
  //
  //           this.coordinateLabelArr.push(label);
  //           this.map.addOverlay(label);                        // 将标注添加到地图中
  //         }
  //       })
  //     } else { //选择框被取消选中
  //       this.coordinateLabelArr.forEach(label => {
  //         this.map.removeOverlay(label);
  //       })
  //     }
  //   },
  //   /**
  //    * 重新绘制电子围栏。
  //    * @param fence
  //    */
  //   reDrawFence(e, fence) {
  //     // console.log("reDrawFence e: ", e)
  //     // console.log("reDrawFence e.target.innerHTML: ", e.target.innerHTML)
  //     // console.log("reDrawFence e.target.innerText: ", e.target.innerText)
  //     // let btnText = this.$refs.reDrawFenceButton[0].$el.innerHTML; //输出：<!----><!----><span>重新绘制</span>
  //     // let btnText = this.$refs.reDrawFenceButton[0].$el; //输出：<!----><!----><span>重新绘制</span>
  //     // let btnText = this.$refs;
  //
  //     if (e.target.innerText === "重新绘制") {
  //       e.target.innerText = "取消绘制";
  //       let overlay = fence.overlay;
  //       if (overlay && this.polygonEdit) {
  //         this.polygonEdit.open(overlay);
  //       }
  //     } else if (e.target.innerText === "取消绘制") {
  //       e.target.innerText = "重新绘制";
  //       this.polygonEdit.close();
  //
  //       this.closeSelect();
  //     }
  //
  //
  //   }
  //
  // }
}
</script>

<style>
.fence-container {
  --rightWidth: 400px;
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left {
  position: relative;
  height: calc(100vh - 84px);
  /*width: 100vw;*/
  width: calc(100vw - 200px - var(--rightWidth));
}

.left .map {
  height: 100%;
  width: 100%;
}

.left .bm-control {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  z-index: 100;
  /*background-color: yellow;*/
}

.left .editTypeSelectClass {
  margin-left: 3px;
}

.left .drawToggle {
  height: 30px;
  /*background: #fff;*/
  margin-left: 10px;
  /*line-height: 30px;*/
  /*padding: 0 10px;*/
  /*border: 1px solid #d8dee5;*/
}

.left .showCoordinatesCheckboxClass {
  position: absolute;
  top: 0;
  right: 10px;
  height: 30px;
  /*background-color: red;*/
}

.right {
  height: calc(100vh - 84px);
  /*padding-left: 5px;*/
  /*padding-top: 5px;*/
  /*width: 100px;*/
  background-color: #f8f2f2;
  overflow-y: auto;
}

.el-checkbox__inner {
  width: 16px;
  height: 16px;
}

.el-checkbox__label {
  color: white;
  line-height: 15px;
  font-size: 14px;
}

.el-input--mini .el-input__inner {
  width: 120px;
}

.el_card_class {
  margin: 5px;
  margin-right: 0;
}

.fence-title {
  display: flex;
  flex-direction: row;
  /*background-color: yellow;*/
  align-items: center;
}

.fence-title .reDrawOrDelete {
  /*background-color: red;*/
  flex-grow: 1;
  text-align: right;
}

</style>
